<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
  <link rel="icon" href="/images/basic/egg_256px_1171557_easyicon.net.png" >
  <title>麦蛋</title>

  <!-- CSS  -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="js/materialize.js"></script>
  <script src="js/init.js"></script>
  
  <style type="text/css">
  	#modal1 {padding:0;}
  </style>
  
  <script type="text/javascript">
  	$(document).ready(function(){
  	  $('.button-collapse').sideNav();
      $('.parallax').parallax();
      $('.carousel').carousel();
      $('.modal').modal();
    
      $('.carousel.carousel-slider').carousel({full_width: true});
    });
  </script>
</head>
<body>
  <nav class="light-blue lighten-1" role="navigation">
    <div class="nav-wrapper container row">
      <ul class="left hide-on-med-and-down">
		<li><a href="#">主页</a></li>
        <li><a href="#">大街</a></li>      
      	<li><a href="#">树洞</a></li>
        <li><a href="#">( •̀ ω •́ )y</a></li>
      </ul>
      
      <ul id="nav-mobile"  class="right hide-on-med-and-down">
      	<li><div class="userView">
      		<img class="circle responsive-img" src="">
      	</div></li>
        <li><a href="#modal1">登陆</a></li>
        <li><a href="#">注册</a></li>
      </ul>
      <a href="#" data-activates="slide-out" class="left button-collapse"><i class="material-icons">menu</i></a>
      
      <!-- 侧边栏 -->
	  <ul id="slide-out" class="side-nav">
		    <li><div class="userView">
		      <div class="background">
		        <img src="http://materializecss.com/images/office.jpg">
		      </div>
		      <a href="#!user"><img class="circle" src="./images/yuna.jpg"></a>
		      <a href="#!name"><span class="white-text name">John Doe</span></a>
		      <a href="#!email"><span class="white-text email">jdandturk@gmail.com</span></a>
		    </div></li>
		    <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
		    <li><a href="#!">Second Link</a></li>
		    <li><div class="divider"></div></li>
		    <li><a class="subheader">Subheader</a></li>
		    <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
	   </ul>
    </div>
  </nav>
  
  <!-- 时差图 -->
  <div class="parallax-container">
    <div class="parallax"><img src="images/parallax2.jpg"></div>
  </div>
  
  <!-- 弹出层 -->
    <div id="modal1" class="modal-content modal">
      <form class="hoverable card-panel" action="#">
	        <div class="row input-field col s3 valign">
	          <i class="material-icons prefix">perm_identity</i>
	          <input id="username" type="password" class="validate">
	          <label for="username" data-error="账号格式错误" data-success="正确">账号</label>
	        </div>
	        <div class="input-field col s3">
	          <i class="material-icons prefix">vpn_key</i>
	          <input id="password" type="password" class="validate">
	          <label for="password" data-error="密码错误" data-success="正确">密码</label>
	        </div>
          <div class="input-field col s2">
            <i class="material-icons prefix">comment</i>
            <input id="email" type="email" class="validate">
            <label for="email" data-error="验证码错误" data-success="正确">邮箱</label>
          </div>
    	<div class="switch valign">
		    <label>
		      Off
		      <input type="checkbox">
		      <span class="lever"></span>
		      On
		    </label>
		    <label for="test5">自动登陆</label>
  		</div>
  		<button class="btn waves-effect waves-light valign" type="submit" name="action">Submit
   			<i class="material-icons right valign">send</i>
 		</button>
	</form>
    </div>
  
  <div class="section no-pad-bot" id="index-banner">
    <div class="container">
      <br><br>
      <h1 class="header center orange-text">你的麦蛋</h1>
      <div class="row center">
        <h5 class="header col s12 light">基于google materializecss，spring系列开发集成。</h5>
      </div>
      <div class="row center">
        <a href="login.html" id="download-button" class="btn-large waves-effect waves-light orange">Get 我的蛋</a>
      </div>
      <br><br>

    </div>
  </div>


  <div class="container">
    <div class="section">

      <!--   Icon Section   -->
      <div class="row">
        <div class="col s12 m4 hoverable">
          <div class="icon-block">
            <h2 class="center light-blue-text"><i class="material-icons">flash_on</i></h2>
            <h5 class="center">Speeds up development</h5>

            <p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
          </div>
        </div>

        <div class="col s12 m4 hoverable">
          <div class="icon-block">
            <h2 class="center light-blue-text"><i class="material-icons">group</i></h2>
            <h5 class="center">User Experience Focused</h5>

            <p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
          </div>
        </div>

        <div class="col s12 m4 hoverable">
          <div class="icon-block">
            <h2 class="center light-blue-text"><i class="material-icons">settings</i></h2>
            <h5 class="center">Easy to work with</h5>

            <p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
          </div>
        </div>
      </div>

    </div>
    <br><br>

    <div class="section">

    </div>
  </div>

  <footer class="page-footer orange">
    <div class="container">
      <div class="row">
        <div class="col l6 s12">
          <h5 class="white-text">Company Bio</h5>
          <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>

        </div>
        <div class="col l3 s12">
          <h5 class="white-text">Settings</h5>
          <ul>
            <li><a class="white-text" href="#!">Link 1</a></li>
            <li><a class="white-text" href="#!">Link 2</a></li>
            <li><a class="white-text" href="#!">Link 3</a></li>
            <li><a class="white-text" href="#!">Link 4</a></li>
          </ul>
        </div>
        <div class="col l3 s12">
          <h5 class="white-text">Connect</h5>
          <ul>
            <li><a class="white-text" href="#!">Link 1</a></li>
            <li><a class="white-text" href="#!">Link 2</a></li>
            <li><a class="white-text" href="#!">Link 3</a></li>
            <li><a class="white-text" href="#!">Link 4</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="container">
      Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a>
      </div>
    </div>
  </footer>


  <!--  Scripts-->
 

  </body>
</html>